/**
*@description CRM运营》招募
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
//import BarChart from '../components/CRM/BarChart';
import LineStack from '../components/CRM/LineStack';
import MyRangePicker from '../components/CRM/MyRangePicker';

import moment from 'moment';
import styles from './HomePage.less';
import {Card, Icon, Tooltip, Table, Row, Col, Button, DatePicker} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

//const {RangePicker,MonthPicker} = DatePicker;
import utils from '../utils/utils';
const {startDate, endDate} = utils.getDefaultDateRange();
const dateFormat = 'YYYY-MM';
const {RangePicker,MonthPicker} = DatePicker;
const columns = [
  { title: '指标', width: 190, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: '2016年1月', dataIndex: 'value1', key: '1'},
  { title: '2016年2月', dataIndex: 'value2', key: '2' },
  { title: '2016年3月', dataIndex: 'value3', key: '3' },
  { title: '2016年4月', dataIndex: 'value4', key: '4' },
  { title: '2016年5月', dataIndex: 'value5', key: '5' },
  { title: '2016年6月', dataIndex: 'value6', key: '6' },
  { title: '2016年7月', dataIndex: 'value7', key: '7' },
  { title: '2016年8月', dataIndex: 'value8', key: '8' },
  { title: '2016年9月', dataIndex: 'value8', key: '9' },
  { title: '2016年10月', dataIndex: 'value9', key: '10', fixed: 'right',
    width: 80 },
];

const data = [{
  key: '1',
  name: '总会员数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '2',
  name: '微信粉丝数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '3',
  name: 'POS会员数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '4',
  name: '老会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '5',
  name: '有效会员数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '6',
  name: '新会员招募（有购买）',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '7',
  name: '新会员中首单350以上招募',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '8',
  name: '新会员招募（无购买）',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '9',
  name: '老会员维系数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '10',
  name: '沉默会员数',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}];


class CRMRecruit extends Component {
  constructor(props) {
      super(props);
  }
  state = {
    startDate: startDate,
    endDate: endDate,
    AreaVipRecruitStartDate:startDate,
    AreaVipRecruitEndDate:endDate,
    WeChatVipStartDate:startDate,
    WeChatVipEndDate:endDate
  };
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
            type: type,
            payload: search
    })
  };
  componentWillMount() {
    this.initData();
  };
  //月度会员招募
  recruitMonthData(){
    this.fetchData('CRMdata/recruitMonth', {
      startMonth: this.state.startDate,
      endMonth: this.state.endDate
    })
  }
  //地区会员招募
  AreaVipRecruitData(){
    this.fetchData('CRMdata/AreaVipRecruit', {
      startMonth: this.state.AreaVipRecruitStartDate,
      endMonth: this.state.AreaVipRecruitEndDate
    });
  }
  //微信会员招募
  WeChatVipData(){
    this.fetchData('CRMdata/WeChatVip', {
      startMonth: this.state.WeChatVipStartDate,
      endMonth: this.state.WeChatVipEndDate
    });
  }
  initData(){
    this.recruitMonthData();
    this.AreaVipRecruitData();
    this.WeChatVipData();
  };
  onMonthChange(date, dateString) {
    this.setState({
      startDate: dateString[0],
      endDate: dateString[1]
    });
  };
  recruitMonthOk(){
    this.recruitMonthData();
  };
  recruitMonthDownload(){
    this.exExcel(this.props.CRMdata.recruitMonthDownloadData,'月度会员招募');
  };
  //地区会员招募
  onAreaChange(date, dateString) {
    this.setState({
      AreaVipRecruitStartDate: dateString[0],
      AreaVipRecruitEndDate: dateString[1]
    });
  };
  AreaVipOk(){
    this.AreaVipRecruitData();
  };
  AreaVipRecruitDownload(){
    this.exExcel(this.props.CRMdata.AreaVipRecruitDownloadData,'地区会员招募');
  };
  //微信注册会员
  onWeChatChange(date, dateString) {
    this.setState({
      WeChatVipStartDate: dateString[0],
      WeChatVipEndDate: dateString[1]
    });
  };
  WeChatVipOk(){
    this.WeChatVipData();
  };
  WeChatVipDownload(){
    this.exExcel(this.props.CRMdata.WeChatVipDownloadData,'微信注册会员');
  };
  exExcel(downloadData, title){
    toExcel(downloadData.header, title, downloadData.data);
  };
  render(){
    const tips1 = (<Row>
        <Col span={6}>月度会员招募</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onMonthChange.bind(this)} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.recruitMonthOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.recruitMonthDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>),
    tips2 = (<Row>
        <Col span={6}>地区会员招募</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onAreaChange.bind(this)} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.AreaVipOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.AreaVipRecruitDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>),
    tips3 = (<Row>
        <Col span={6}>微信注册会员</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onWeChatChange.bind(this)} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.WeChatVipOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.WeChatVipDownload.bind(this)} className= {styles.searchOk}>下载数据</Button></Col>
      </Row>);
  return (
    <MainLayout isShowLeft="showCRM">
        <div style={{marginTop:29}}>
                <Card title={tips1} style={{minHeight:300}}>
                      <LineStack data={this.props.CRMdata.recruitMonthData} loading={this.props.CRMdata.recruitMonthLoading} seriesName="月度会员招募" width={"100%"} height={300} />
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.recruitMonthTableData.columns} dataSource={this.props.CRMdata.recruitMonthTableData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips2} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.AreaVipRecruitTableData.columns} dataSource={this.props.CRMdata.AreaVipRecruitTableData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips3} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.WeChatVipTableData.columns} dataSource={this.props.CRMdata.WeChatVipTableData.data} scroll={{ x: 1300 }} />
                </Card>
        </div>
    </MainLayout>
  );
  }
};

CRMRecruit.propTypes = {
};

function mapStateToProps({ CRMdata }) {
  return {
    CRMdata: {...CRMdata},
  };
}

export default connect(mapStateToProps)(CRMRecruit);
